import React, {useEffect, useState} from 'react';
import {NavLink, Outlet, useNavigate} from 'react-router-dom';
import {Shell, Box, Button, Message} from '@alifd/next';
import './index.css';

const ShellPage = () => {
    const navigate = useNavigate();

    const loginUser = JSON.parse(window.localStorage.getItem("icip-dingtalk-loginUser")) || "";
    const corpId = window.localStorage.getItem("icip-dingtalk-corpId");

    const [corpName, setCorpName] = useState("");
    // eslint-disable-next-line
    useEffect(() => {
        //判断当前localStorage中是否有icip-dingtalk数据，如果没有，则跳转至login页面
        if (!corpId) {
            Message.notice("未获取到当前登录的企业信息！");
            setTimeout(() => {
                navigate("/login")
            }, 1000)
        } else if (!loginUser) {
            Message.notice("未获取到当前登录的用户信息！");
            setTimeout(() => {
                navigate(`/login?corpId=${corpId}`)
            }, 1000)
        } else {
            //获取企业授权信息
            const requestOptions = {
                method: 'GET',
                redirect: 'follow'
            };
            fetch(`${window.appConfig.servicePath}/getAuthInfo?corpId=${corpId}`, requestOptions)
                .then(response => response.json().then(result => {
                        setCorpName(result.auth_corp_info.corp_name);
                    })
                ).catch(error => console.log('error', error));
        }
    }, [loginUser, corpId, navigate])
    return (
        <div className="ShellPage">
            <Shell
                className={"iframe-hack"}
                style={{border: "1px solid #eee"}}
            >
                <Shell.Branding>
                    <img className="rectangular" src="/image/ICIP_1051*417.png" alt=""/>
                </Shell.Branding>
                <Shell.Navigation direction="hoz">
                    <Box direction={"row"} spacing={16}>
                        <NavLink className="Nav" to="project"><Button text size="large">项目</Button></NavLink>
                        <NavLink className="Nav" to="robot"><Button text size="large">机器人</Button></NavLink>
                    </Box>

                </Shell.Navigation>
                <Shell.Action>
                    <div className={"shellPage_company_name"}>{corpName}</div>
                    <img
                        src={loginUser ? loginUser.avatar : ""}
                        className="avatar"
                        alt="用户头像"
                    />
                    <div className={"shellPage_user_name"}>{loginUser.userName}</div>
                </Shell.Action>


                <Shell.Content className="shellPage_content">
                    <Outlet/>
                </Shell.Content>

                <Shell.Footer>
                    <div className="footer_content">ICIP DingTalk Version 2.0.2 builder</div>
                    <div className="footer_content">@2023 霍迹</div>
                </Shell.Footer>
            </Shell>
        </div>
    );

};

export default ShellPage;